<template>
  <div class="wrapper">
    <div>
      <span class="iconfont">&#xe623;</span>
      <nut-textinput v-model="workID" placeholder="请输入用户名" :clearBtn="true" :disabled="false" />
    </div>
    <div>
      <span class="iconfont">&#xe638;</span>
      <nut-textinput v-model="password" placeholder="请输入密码" type="password" class="txtPassword" />
    </div>
    <div>
      <nut-row type="flex" align="center">
        <nut-col :span="18">
          <div class="flex-content flex-content-height">
            <span class="iconfont">&#xe634;</span>
            <nut-textinput
              v-model="validateCode"
              placeholder="请输入验证码"
              :clearBtn="true"
              :disabled="false"
            />
          </div>
        </nut-col>
        <nut-col :span="6">
          <div class="flex-content flex-content-height">
            <validate-code class="validateCode"></validate-code>
          </div>
        </nut-col>
      </nut-row>
    </div>
    <div>
      <nut-button block shape="circle" @click="loginIn">登录</nut-button>
    </div>
  </div>
</template>

<script>
import ValidateCode from "./ValidateCode";
export default {
  name: "LoginForm",
  components: {
    ValidateCode
  },
  data() {
    return {
      workID: "",
      password: "",
      validateCode: "",
      color: {
        color: "success",
        message: "Hello World, Snackbar !",
        open: false,
        timeout: 3000
      }
    };
  },
  methods: {
    loginIn() {
      this.$axios({
        url: "/api/Login/ValidateLogin",
        params: {
          workID: this.workID,
          password: this.password,
          validateCode: this.validateCode,
          timestamp:this.$store.state.timestamp
        },
        method: "post"
      }).then(res => {
        //console.log(res);
        var obj = JSON.parse(res.data);
        if (obj.ret) {
          this.$store.dispatch('saveUserInfo',obj.data)
            this.$router.push({path:"/Index"})
        } else {
          this.$toast.fail(obj.res);
        }
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="less" scoped>
@padding-left: 20px;
.wrapper > div {
  position: relative;
  margin-bottom: 15px;
}
.iconfont {
  position: absolute;
  z-index: 100;
  top: 13px;
}
.wrapper /deep/ .nut-textinput input {
  padding-left: @padding-left;
}
</style>
